var ID_CONTAINER = 'container';
var CLASS_MODEL_CELL = 'model-cell';
var CLASS_ACTIVE_MODEL = 'active-model';
var CLASS_FIXED_MODEL = 'fixed-model';
var ATTR_DATA_INDEX = 'data-index';

var domHelper = {
    buildModelElement: function() {
        let containerEle = this.getContainerElement();
        for (let i = 0; i < 4; i++) {
            let activeEle = document.createElement('div');
            activeEle.classList.add(CLASS_MODEL_CELL);
            activeEle.classList.add(CLASS_ACTIVE_MODEL);
            containerEle.appendChild(activeEle);
        }
    },
    updateContainerSize: function(width, height) {
        domHelper.updateElementSize(this.getContainerElement(), width, height);
    },
    updateActiveElementPosition: function(positions) {
        let activeEles = domHelper.getActiveElements();
        for (let i = 0; i < activeEles.length; i++) {
            this.updateElementPosition(activeEles[i], positions[i].x, positions[i].y);
        }
    },
    getActiveElements: function() {
        return document.querySelectorAll(`.${CLASS_ACTIVE_MODEL}`);
    },
    getContainerElement: function() {
        return document.querySelector(`#${ID_CONTAINER}`);
    },
    updateElementPosition: function(ele, x, y) {
        ele.style.top = this.getPx(x);
        ele.style.left = this.getPx(y);
    },
    // width为宽度单元格数，height为高度单元格数
    updateElementSize: function(ele, width, height) {
        ele.style.width = this.getPx(width);
        ele.style.height = this.getPx(height);
    },
    getPx: function(cellNum) {
        return cellNum * CELL_SIZE + "px";
    },
    switch2Fixed: function(ele) {
        ele.classList.remove(CLASS_ACTIVE_MODEL);
        ele.classList.add(CLASS_FIXED_MODEL);
    }
};